<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Jquery Ajax 01 Page</h1>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doAjaxPost()">$.post(...)</button>
    <button onclick="doAjaxGet()">$.get(...)</button>
    <button onclick="doAjaxLoad()">$("..").load(...)</button>
</div>
<div id="result"></div>
<script src="/js/jquery.min.js"></script>
<script>
    //基于jquery中的ajax函数，向服务端发送异步请求
    function doAjax(){
        //1.定义url
        let url="/doAjaxPost";
        //2.定义请求参数
        let params="id=200&name=oppo&remark=very good";
        //3.发送异步请求(底层会借助XmlHttpRequest对象)
        $.ajax({//这里的$符号为jquery对象，ajax()为jquery中的ajax函数
            type:"POST",//不写这个选项，默认为get请求
            url:url,
            data:params,
            success:function(result){//xhr.readState==4 && xhr.status==200
                $("#result").html(result);//这里的result为服务端响应到客户端的结果
            }
        })
    }
    function doAjaxPost(){
        //1.定义url
        let url="/doAjaxPost";
        //2.定义请求参数
        let params="id=200&name=oppo&remark=very good";
        //3.发送异步请求(底层会借助XmlHttpRequest对象)
        $.post(url,params,function(result){//4&&200
            $("#result").html(result);
        });//post函数时jquery中$.ajax({})函数中的一种演变形式

    }
    function doAjaxGet(){
        //1.定义url
        let url="/doAjaxGet";
        //2.定义请求参数
        let params="";
        //3.发送异步请求(底层会借助XmlHttpRequest对象)
        $.get(url,params,function(result){//4&&200
            $("#result").html(result);
        },"text");//post函数时jquery中$.ajax({})函数中的一种演变形式
    }
    function doAjaxLoad(){
        let url="/doAjaxGet";
        //
        //
        $("#result").load(url,function () {
            console.log("load complete");
        });
    }

</script>
</body>
</html>